// 引入
@import "reset";
@import "tool";
@import "flex";

// 公共部分
body, html, section {
    overflow: hidden;
    height: 100%;
    width: 100%;
}

section {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

body {
    background-color: #fff;
}

body, input, textarea, select, button {
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    color: #000;
}

a,
a:link, a:visited,
a:hover, a:active {
    text-decoration: none;
}

::-webkit-input-placeholder {
    color: #000;
}

:-moz-placeholder {
    color: #000;
}

::-moz-placeholder {
    color: #000;
}

:-ms-input-placeholder {
    color: #000;
}

// 自定义
.banner-draw {
    .height(515px);
    img {
        .width(100%);
        .height(100%);
        vertical-align: middle;
    }
}

.form {
    .margin-top(50px);
    label {
        .width(450px);
        .height(54px);
        .line-height(54px);
        .border-radius(10px,10px,10px,10px);
        background-color: #d2d2d2;
        .box-shadow-inset(0,6px,10px,rgba(0,0,0,0.25));
        input {
            .width(100%);
            .padding(0,15px,0,15px);
            .box-sizing();
            font-weight: bold;
        }
    }
    button {
        .width(120px);
        .height(54px);
        .line-height(54px);
        text-align: center;
        background: url("../img/button.jpg") no-repeat scroll center center transparent;
        -webkit-background-size: contain;
        background-size: contain;
        .margin-left(15px);
        color: #fff;
        font-weight: bold;
    }
}

.result {
    .margin-top(100px);
    text-align: center;
    font-weight: bold;
    p {
        .margin-top(30px);
        &:nth-child(2) {
            .margin-top(16px)
        }
        span {
            color: #da1a22;
        }
    }
}

.result-inf {
    .margin-top(40px);
    .margin-bottom(60px);
    .padding-top(40px);
    .padding-bottom(40px);
    position: relative;
    text-align: center;
    font-weight: bold;
    &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        .translate(-50%,0);
        .width(20px);
        .height(3px);
        background-color: #000;
    }
}

footer {
    background-color: #1b1b1b;
    overflow: hidden;
    a {
        .height(98px);
        .line-height(98px);
        text-align: center;
        font-weight: bold;
        color: #fff;
        position: relative;
        &:before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            .translate(0,-50%);
            .width(1px);
            .height(45px);
            .border-left(3px,solid,#fff);
        }
        &:first-child {
            &:before {
                border-left: none;
            }
        }
    }
}

.banner {
    a {
        display: block;
        height: 100%;
        img {
            width: 100%;
            height: 100%;
            vertical-align: top;
        }
    }
    &.swiper-container-horizontal > .swiper-pagination-bullets {
        .bottom(15px);
        .transition(all,0s);
        .swiper-pagination-bullet {
            .margin(0,4px,0,4px);
            .border-radius(100%,100%,100%,100%);
            opacity: 1;
            width: 5px;
            height: 5px;
            border: 1px solid #707070;
            background-color: transparent;
            [data-dpr="2"] & {
                border: 2px solid #707070;
                width: 10px;
                height: 10px;
            }
            [data-dpr="3"] & {
                border: 3px solid #707070;
                width: 15px;
                height: 15px;
            }
            &.swiper-pagination-bullet-active {
                background-color: #707070;
                opacity: 1;
            }
        }
    }
}

.dark-bg {
    background-color: #020202;
}

.details-img {
    background-color: #fff;
    img {
        vertical-align: top;
        width: 100%;
    }
}

.details-inf {
    background: url("../img/details_bg.jpg") no-repeat scroll center 0;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    overflow: hidden;
    .padding(0px,60px,30px,60px);
    h1 {
        color: #cd1313;
        font-weight: bold;
        .margin-bottom(12px);
        .margin-top(30px)
    }
    ul {
        color: #fff;
        list-style: outside decimal;
        li {
            .line-height(40px);
            .margin-left(32px);
        }
    }
}

.details-logo {
    text-align: center;
    .width(128px);
    .height(42px);
    .margin(30px,auto,0,auto);
    img {
        .width(100%);
        .height(100%);
        vertical-align: top;
    }
}

.result-bg {
    background: url("../img/result_bg.jpg") no-repeat scroll 0 0;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
}

.result-main {
    .width(632px);
    .height(978px);
    background: url("../img/result_bg_inner.png") no-repeat scroll 0 0;
    -webkit-background-size: contain;
    background-size: contain;
    .margin(110px,auto,0,auto);
    h1 {
        font-weight: bold;
        text-align: center;
        color: #fff;
        .height(105px);
        .line-height(105px);
    }
}

.result-main-scroll {
    .width(530px);
    .height(606px);
    .margin(0,auto,0,auto);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    color: #fff;
    .border(3px,solid,#fff);
    .box-sizing();
    ul {
        li {
            .height(84px);
            border-top: 1px solid #fff;
            [data-dpr="2"] & {
                border-top: 2px solid #fff;
            }
            [data-dpr="3"] & {
                border-top: 3px solid #fff;
            }
            &:first-child {
                border-top: none;
            }
            p {
                .padding(0,25px,0,25px);
                text-align: center;
                &:first-child {
                    text-align: left;
                    .padding-right(0);
                    .width(120px);
                }
                &:last-child {
                    text-align: right;
                    .padding-left(0);
                    .width(180px);
                }
            }
        }
    }
}

.dialog {
    background-color: rgba(0,0,0,0.6);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: none;
}

.personal-inf {
    .width(510px);
    position: absolute;
    left: 50%;
    top: 50%;
    .translate(-50%,-50%);
    background-color: #fff;
    .border-radius(10px,10px,10px,10px);
    .padding(0,40px,0,40px);
    .box-shadow(0,18px,60px,rgba(0,0,0,0.6));
    h1 {
        font-weight: bold;
        .padding(40px,0,40px,0);
        text-align: center;
    }
    p {
        color: #000;
        .margin-top(15px);
        text-align: center;
    }
    button {
        text-align: center;
        font-weight: bold;
        .width(100%);
        .padding(40px,0,40px,0);
        color: #da1a22;
    }
    ul {
        li {
            .margin-top(35px);
            &:first-child {
                margin-top: 0;
            }
            label {
                display: block;
                input {
                    .width(100%);
                    .height(72px);
                    .border-radius(10px,10px,10px,10px);
                    text-align: center;
                    border: 1px solid #000;
                    [data-dpr="2"] & {
                        border: 2px solid #000;
                    }
                    [data-dpr="3"] & {
                        border: 3px solid #000;
                    }
                }
            }
        }
    }
}